<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formBook" :rules="rulesPsPassword" :model="formPsPassword" label-width="180px">
      <el-form-item label="密码名称" prop="name" >
        <el-input v-model.trim="formPsPassword.name"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属家庭成员" prop="userMemberFamilyId">
            <el-select v-model="formPsPassword.userMemberFamilyId" placeholder="请选择类型" clearable>
              <el-option label="全家" value="-1"></el-option>
              <el-option
                v-for="item in userMemberFamilyIdList"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
                >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <p style="font-size: 12px; color: red">默认不填则该信息属于全体家庭成员</p>
        </el-col>
      </el-row>

      <el-form-item label="密码类型" prop="typeId">
        <el-select v-model="formPsPassword.typeId" placeholder="请选择类型" clearable>
          <el-option
            v-for="item in passwordTypeIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号" prop="account" >
        <el-input v-model.trim="formPsPassword.account"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="密码1" prop="password" >
            <el-input v-model.trim="formPsPassword.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="11">
          <el-button type="primary" @click="createPassword">生成密码</el-button>
          <span>密码：{{passwordGenerationNum}}</span>
        </el-col>
      </el-row>


      <!--<el-form-item label="密码1" prop="password" >-->
      <!--  <el-input v-model.trim="formPsPassword.password"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="密码2" prop="passwordTwo" >
        <el-input v-model.trim="formPsPassword.passwordTwo"></el-input>
      </el-form-item>
      <el-form-item label="密码3" prop="passwordThree" >
        <el-input v-model.trim="formPsPassword.passwordThree"></el-input>
      </el-form-item>
      <el-form-item label="密码4" prop="passwordThree" >
        <el-input v-model.trim="formPsPassword.passwordFour"></el-input>
      </el-form-item>
      <el-form-item label="密保" prop="passwordProtection" >
        <el-input v-model.trim="formPsPassword.passwordProtection"></el-input>
      </el-form-item>
      <el-form-item label="绑定手机" prop="phone" >
        <el-input v-model.trim="formPsPassword.phone"></el-input>
      </el-form-item>
      <el-form-item label="绑定邮箱" prop="email" >
        <el-input v-model.trim="formPsPassword.email"></el-input>
      </el-form-item>
      <el-form-item label="网站名称" prop="webName" >
        <el-input v-model.trim="formPsPassword.webName"></el-input>
      </el-form-item>
      <el-form-item label="网站url" prop="webUrl" >
        <el-input v-model.trim="formPsPassword.webUrl"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="describe" >
        <el-input v-model.trim="formPsPassword.describe" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="附加信息" prop="subsidiaryInfo" >
        <el-input v-model.trim="formPsPassword.subsidiaryInfo" type="textarea"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid, getFullDate} from "../../utils/utils"

  export default {
    name: "PasswordManagementSaveUpd",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 家庭成员列表
        userMemberFamilyIdList: [],
        // 密码类型
        passwordTypeIdList: [],
        // 生成出来的密码
        passwordGenerationNum: '',
        // 要提交的数据
        formPsPassword: {
          name: null,
          userMemberFamilyId: [],
          typeId: [],
          account: null,
          password: null,
          passwordTwo: null,
          passwordThree: null,
          passwordFour: null,
          passwordProtection: null,
          phone: null,
          email: null,
          webName: null,
          webUrl: null,
          describe: null,
          subsidiaryInfo: null,
        },
        // 生成密码的参数
        fromPassword: {
          strLength: 6,
          numLength: 3,
          specialLength: 2,
        },
        // 校验规则
        rulesPsPassword: {
          name: [{ required: true, message: '请输入密码名称', trigger: 'blur' }],
          account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          typeId: [{ required: true, message: '请选择密码类型', trigger: 'change' }],
        }
      }
    },
    methods: {
      /**
       * 生成密码
       */
      createPassword(){
        http.post("/cypher/createPassword", this.fromPassword).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.passwordGenerationNum = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param userMemberFamilyIdList 家庭成员类型
       * @param passwordTypeIdList 密码类型
       */
      openPagePsPassword(value, obj, passwordTypeIdList, userMemberFamilyIdList){
        this.passwordTypeIdList = passwordTypeIdList
        this.userMemberFamilyIdList = userMemberFamilyIdList
        this.defaultValue.saveUpdSelect = value
        this.initPsPassword()
        if (value === 'save'){
          this.defaultValue.title = '保存密码'

        } else if (value === 'upd'){
          // this.userMemberFamilyIdList.push({"id": "-1", "userName": "全家"})
          this.defaultValue.title = '修改密码'
          this.formPsPassword = JSON.parse(JSON.stringify(obj))

        } else {

        }

        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['保险箱', '密码管理', this.defaultValue.title])

      },
      /**
       * 初始化
       */
      initPsPassword(){
        this.formPsPassword = {
          name: null,
          userMemberFamilyId: null,
          typeId: null,
          account: null,
          password: null,
          passwordTwo: null,
          passwordThree: null,
          passwordFour: null,
          passwordProtection: null,
          phone: null,
          email: null,
          webName: null,
          webUrl: null,
          describe: null,
          subsidiaryInfo: null,
        }
      },
      /**
       * 是保存还是修改游戏
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.savePsPassword()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updPsPassword()

        } else {

        }
      },
      /**
       * 更新密码
       */
      updPsPassword(){
        clearInvalid(this.formPsPassword)
        http.post("/cypher/updPsPassword", this.formPsPassword).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getPasswordAll', null)
          // 关闭弹出框
          this.initPsPassword()
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存密码
       */
      savePsPassword(){
        http.post("/cypher/savePsPassword", this.formPsPassword).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('getPasswordAll', null)
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    }
  }
</script>

<style scoped>

</style>
